<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #wrap {
            width: 400px;
            height: 600px;
            margin: 10px auto;
        }

        #wrap .header {
            height: 200px;
            width: 400px;
            text-align: center;
            line-height: 200px;
        }

        #wrap .middle {
            height: 200px;
            width: 400px;
            text-align: center;
            line-height: 200px;
        }

        #wrap .footer {
            height: 200px;
            width: 400px;
            text-align: center;
            line-height: 200px;
            position: relative;
        }

        #result {
            height: 200px;
            width: 200px;
            border-radius: 50%;
            border: 1px solid red;
            position: absolute;
            left: 100px;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div class="header">
        <button id="btn">开始</button>
    </div>
    <div class="middle">
        <img src="img/s1.jpg" id="img">
    </div>
    <div class="footer">
        <div id="result"></div>
    </div>
</div>
</body>
<script>
    var arr = ["周志高", "柯为", "张妮", "龙云锦", "付良辰", "熊琦琦", "刘佳伟", "魏启超", "柯俊", "叶梦蝶", "章锐林", "黄田昌", "胡瑞", "李科君", "高昕", "李文尧", "童鑫", "任凯迪", "任佳音", "熊润泽", "王玲", "万鑫", "李文杰", "曾卓", "夏冰心", "章文", "徐书生", "郭梦婷", "黄彬瑶", "张飞", "马伟", "刘斌"];
    var imgArr = ["s1.jpg", "s2.jpg", "s3.jpg", "s4.jpg", "s5.jpg", "s6.jpg"];
    var btn = document.getElementById("btn");
    var img = document.getElementById("img");
    var result = document.getElementById("result");
    var count = 0;
    var timer = null;

    btn.onclick = function () {//按钮的点击事件
        count++;
        if (count % 2 != 0) {
            btn.innerHTML = "暂停";
            clearInterval(timer);
            timer = setInterval(function () {
                result.innerHTML = getRandByList(arr);
                img.src = "img/" + getRandByList(imgArr);
            }, 100);
        } else {
            clearInterval(timer);
            btn.innerHTML = "开始";
        }


    }
    function getRandByList(list) {
        var index = Math.round(Math.random() * (list.length - 1));
        return list[index];
    }

</script>
</html>